<template>
	<view>
		<div class="navbar-wrap">
			<div class="img-bg">
				<image :src="www + 'imgs/home/home-top-bg.png'" mode="widthFix"></image>
			</div>
			<div class="statusBarHeight" :style="{height: statusBarHeight + 'px'}"></div>
			<div class="navbar" :style="{top: statusBarHeight + 'px'}">
				<!-- 当前城市 -->
				<div class="l-wrap" @click="pageJumps('/pagesSecond/make/selectCity')">
					<view class="location-icon">
						<image src="../../static/imgs/icons/location-icon.png" mode="widthFix"></image>
					</view>
					<view class="name">{{addressName}}</view>
				</div>
				<!-- #ifdef MP-WEIXIN -->
				<div class="c-tit">去嗨鸭</div>
				<!-- #endif -->
			</div>
		</div>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		props: {
			nowCity: {
				type: [String]
			}
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				addressName: '',
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}]
			};
		},
		created() {
			this.initMap()
			this.getLocation()
		},
		methods: {
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
			},
			handleGoAnnouncement() {
				this.$emit('handleGoAnnouncement')
			},

			getLocation() {
				console.log("定位中...");
				uni.showLoading({
					title: '获取定位信息中'
				});
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success: async function(res) {
						uni.hideLoading()
						console.log('定位数据...');
						let {
							latitude,
							longitude
						} = res
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif

						// #ifdef H5
						let data = await _this.exchangeDingwei(latitude, longitude)
						_this.addressName = data.result.ad_info.city
						let addressInfo = data.result.ad_info
						_this.$emit('getAddressInfo', addressInfo)
						_this.$store.commit('upCurLocation', addressInfo)
						if (_this.nowCity) {
							_this.addressName = _this.nowCity
							_this.$store.commit('upChangeNowCity', _this.addressName)
						} else {
							_this.$store.commit('upChangeNowCity', _this.addressName)
						}
						// #endif
						_this.covers[0].latitude = latitude // 当前位置的纬度
						_this.covers[0].longitude = longitude // 当前位置的经度
					},
					complete(){
						uni.hideLoading()
					}
				});
			},
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success: function(res) {
						_this.addressName = res.result.ad_info.city
						let addressInfo = res.result.ad_info
						_this.$emit('getAddressInfo', addressInfo)
						_this.$store.commit('upCurLocation', addressInfo)

						if (_this.nowCity) {
							_this.addressName = _this.nowCity
							_this.$store.commit('upChangeNowCity', _this.addressName)
						} else {
							_this.$store.commit('upChangeNowCity', _this.addressName)
						}


					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-wrap {
		.img-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}

		.navbar {
			position: absolute;
			left: 0;
			right: 0;
			height: 88rpx;
			line-height: 88rpx;
			justify-content: space-evenly;
			text-align: center;
			color: #fff;
			font-size: 36rpx;

			.l-wrap {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 30rpx;
				display: flex;

				.location-icon {
					height: 47rpx;
					width: 39rpx;
					margin: 10rpx 15rpx 0 30rpx;
					display: inline-block;
				}
			}
		}
	}
</style>
